<template>
	<view class="viewbox auto  p-bot100" v-if="pageShow">
		
		<view class="topNav d-flex j-sb a-center ">
			<block v-for="(item,index) in navList" :key="index">
			   <text :class="current == index?'white size32':'color_7e size30'" 
			        @click="changTab(index)">{{item}}</text>
			</block>
		</view>
		
		<scroll-view scroll-x="true"  class="scrollBox nowrap " 
		            v-if="current == 0 || current == 2 && pageData.length">
			</block>
			<block v-for="(item,index) in pageData" :key="index">
				<view class="d-inline-block  scollList" 
					 :class="num == index?'white size32':'color_7e size30'"
					 @click="num = index">{{item.name}}
				</view>
			</block>
		</scroll-view><strong></strong>
		
		<block v-if="app_token && current == 0 || current == 2">
			<block v-if="pageData.length">
				<view class="row j-sb p-left10 p-right10 m-top20" 
				    v-if="pageData[num].goods && pageData[num].goods.length">
					<block v-for="(item,index) in pageData[num].goods" :key="index">
						<view class="list bg28 bor_radius_20 p-bot20 m-bot20"
						     @click="toPage(item)">
							<view class="listImg flexac hidden">
								<image :src="item.goods_image" class="wh"></image>
							</view>
							<view class="row p-left10 p-right10">
								<view class="rows white ellipsis size26 m-top20">{{item.goods_name}}</view>
								<view class="toKenNum d-flex a-center m-top14" v-if="item.goods_count == 1">
									 <view class="tokenOn flexac">
										 <image src="../../static/imgs/bg02.png" class="tokenIcon"></image>
									 </view>
									 <view class="tonum  ellipsis p-left50  white h7 ">
									 {{item.token_id}}#{{item.number}}/{{item.stock}}
									</view>
								</view>
							
								<view class="rows white ellipsis size26 m-top20">{{item.creator}}</view>
								<view class="row white size26 m-top20" v-if="item.goods_count > 1">X {{item.goods_count}}</view>
							</view>
						</view>
					</block>
				</view>
			</block>	

			<empty title="暂无相关信息" v-else></empty>
		</block>
		
		<block v-if="app_token && current == 1">
			<block v-if="pageData.length">
				<view class="row j-sb p-left10 p-right10 m-top20">
					<block v-for="(item,index) in pageData" :key="index">
						<view class="list bg28 bor_radius_20 p-bot20 m-bot20" 
							 @click="toUrl(`/pages/manghe/openMangheDetail?goodsId=${item.goods_id}`)">
							<view class="listImg flexac hidden">
								<image :src="item.goods_image" class="wh"></image>
							</view>
							<view class="row p-left10 p-right10">
								<view class="rows white ellipsis size26 m-top20">{{item.goods_name}}</view>
							</view>
						</view>
					</block>
				</view>
			</block>	
		
			<empty title="暂无相关信息" v-else></empty>
		</block>
		
		
		
		<view class="row  f-column a-center" v-if="!app_token">
			<view class="">
				<empty title="登录后可查看我的藏品"></empty>
			</view>

			<view class="nowDEN white size40 bold flexac m-top40" 
			     @click="toUrl(`/pages/login/login`)">立即登录</view>
		</view>


	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				pageShow: false,
				pageData: [],
				current:0,
				num:0,
				navList:['我的藏品','我的盲盒','我的合成'],
				is_compose:0, //0 我的藏品  1 我的合成
			}
		},
		onLoad() {
			this.getList()
		},
		
		methods: {
			changTab(index){
				this.current = index;
				this.page = 1;
			
				if(index == 0){
					 this.is_compose = 0
					 this.getList();
					 return 
				};
				if(index == 1) return this.mangheList();
				if(index == 2){
					 this.is_compose = 1
					 this.getList();
					 return 
				};
				this.pageData = [];
			},
			
			toPage(item){
				if(item.goods_count > 1){
					 this.toUrl(`Colllist?goods_id=${item.goods_id}&is_compose=${this.is_compose}`);
					 return;
				}
				this.toUrl(`/pages/user/myArtDetail?goodsId=${item.id}`)
			},
			
			
			//  我的藏品  我的合成
			getList() {
				this.$http.post('order/collectionList', {
					status: 1,
					is_compose:this.is_compose
				}).then(res => {
					this.pageShow = true;
					if (res.code == 401) return;
					if (res.code != 1) return this.$Toast(res.msg);
					let info = res.data;
					let all = {
						name:'全部',
						goods:[],
					}
					
					info.forEach((item,index)=>{
						if(item.goods && item.goods.length) all.goods = all.goods.concat(item.goods)
					})
					info.unshift(all);
					this.pageData = info;
				})
			},
			mangheList(){
				this.$http.post('/Manghe/mangheList',{
					page:this.page,
					pagesize:1000,
				}).then(res=>{
					this.pageData = res.data.data;
				})
			},
			
		},
		computed: {
			...mapState(['app_token']),
		}
	}
</script>
<style>
	page {
		background-color: #1e201f;
	}
</style>
<style lang="scss" scoped>
	
	.toKenNum{
		width:100%;
		height: 50rpx;
		position: relative;
	}
	.tokenOn{
		width:50rpx;
		height: 50rpx;
		background-image: url(@/static/imgs/bg01.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: relative;
		z-index:10;
	}
	.tokenIcon{
		width:30rpx;
		height: 24rpx;
	}
	.tonum{
		width: 90%;
		height: 44rpx;
		line-height: 44rpx;
		background-color: #eab855;
		margin-left:-40rpx;
		border-radius: 22rpx;
	}
	.list {
		width: 300rpx;
	}

	.listImg {
		width: 100%;
		height: 300rpx;
		vertical-align: top;
	}

	.nowDEN {
		width: 300rpx;
		height: 80rpx;
		border-radius: 40rpx;
		background-color: #ead097;
	}
	.topNav{
		width:100%;
		height: 100rpx;
	}
	.scrollBox{
		width:100%;
		height: 60rpx;
		line-height: 60rpx;
	}
	.scollList{
		margin-right: 30rpx;
	}
	.scollList:last-child{
		margin-right: 0;
	}
</style>
